<template>
  <div id="mapDiv">
    <!-- 加载提示 -->
    <div v-if="loading" class="map-loading">
      <i class="el-icon-loading"></i>
      <span>地图加载中...</span>
    </div>
  </div>
</template>
<script>
import MapInit from './mapint.js'
import { findAllCoords,findAllEquipment } from '../util/api.js'
import {getCenter} from './panduan.js'
export default {
  props: {
    show: {
      type: Boolean,
      default: true
    },
    clear: {
      type: Boolean
    }
  },
  data() {
    return {
      map: null,
      lay: null,
      loading: false,
      config: {
        showLabel: false,  // 不显示面积信息
        color: "#FFFFFF",
        weight: 3,
        opacity: 0.5,
        fillColor: "#FFFFFF",
        fillOpacity: 0.5
      },
      infoAdd: {
        baseId: "",
        baseName: "",
        coords: [],
      },
      basePolygons: [],
      handlers: null,
      // 优化：存储所有覆盖物，便于管理
      overlays: [],
      markerCluster: null, // 点聚合实例
      currentZoom: 16, // 当前缩放级别
      visibleMarkers: new Set(), // 可见标记集合
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initTdtMap();
    })
  },
  
  beforeDestroy() {
    // 组件销毁前清理资源
    this.clearAllOverlays()
    if (this.map) {
      this.map = null
    }
  },
  watch: {
    clear: function (newVal, oldVal) {
      if (newVal) {
        if (this.handlers) {
          this.handlers.clear()
        }
        this.clearAllOverlays()
        this.$emit('clearChange', false)
      }
    },
  },
  methods: {
    /**
     * 获取地图数据（优化：并发请求）
     */
    async findAllCoords() {
      try {
        this.loading = true
        // 优化：并发请求，减少等待时间
        const [coordsRes, pointsRes] = await Promise.all([
          findAllCoords(),
          findAllEquipment()
        ])
        
        if (coordsRes.code === 200 && pointsRes.code === 200) {
          this.addPoints(coordsRes.data || [], pointsRes.data || [])
        }
      } catch (error) {
        console.error('获取地图数据失败:', error)
        this.$message.error('地图数据加载失败')
      } finally {
        this.loading = false
      }
    },
    /**
     * 初始化天地图
     */
    initTdtMap() {
      MapInit.init().then((T) => {
        this.map = new T.Map('mapDiv')
        this.map.centerAndZoom(new T.LngLat(107.721097, 35.125455), 16)
        this.map.disableDoubleClickZoom()
        this.map.setMapType(window.TMAP_HYBRID_MAP)
        
        // 监听缩放级别变化，动态调整显示
        this.map.addEventListener('zoomend', () => {
          this.currentZoom = this.map.getZoom()
          this.handleZoomChange()
        })
        
        // 地图加载完成后再加载数据
        this.findAllCoords()
      })
    },
    /**
     * 添加标记（优化版本）
     */
    addPoints(baseArray = [], points = []) {
      // 优化1：先清空之前的覆盖物
      this.clearAllOverlays()
      
      // 优化2：设置地图中心
      if (baseArray.length > 0) {
        try {
          const center = JSON.parse(baseArray[0].coords)[0]
          this.map.panTo(new T.LngLat(center.lng, center.lat))
        } catch (error) {
          console.error('解析地块坐标失败:', error)
        }
      }
      
      // 优化3：使用 requestAnimationFrame 分批渲染，避免阻塞UI
      this.addPolygonsBatch(baseArray)
      this.addMarkersBatch(points)
    },
    
    /**
     * 分批添加地块（优化：避免一次性渲染太多）
     */
    addPolygonsBatch(baseArray) {
      const batchSize = 20 // 每批处理20个
      let index = 0
      
      const addBatch = () => {
        const end = Math.min(index + batchSize, baseArray.length)
        
        for (let i = index; i < end; i++) {
          const base = baseArray[i]
          try {
            const baseSpoints = []
            const pointArray = JSON.parse(base.coords)
            
            pointArray.forEach((item) => {
              baseSpoints.push(new T.LngLat(item.lng, item.lat))
            })
            
            const polygon = new T.Polygon(baseSpoints, {
              color: base.color || '#409EFF',
              weight: 1,
              opacity: 1,
              fillColor: base.color || '#409EFF',
              fillOpacity: 0.5
            })
            
            this.map.addOverLay(polygon)
            this.overlays.push(polygon)
            
            // 地块点击事件
            polygon.addEventListener('click', () => {
              this.$emit('landClick', base)
            })
          } catch (error) {
            console.error(`添加地块 ${base.baseName || i} 失败:`, error)
          }
        }
        
        index = end
        
        // 如果还有剩余，继续下一批
        if (index < baseArray.length) {
          requestAnimationFrame(addBatch)
        }
      }
      
      if (baseArray.length > 0) {
        requestAnimationFrame(addBatch)
      }
    },
    
    /**
     * 分批添加点位标记（优化：分批渲染 + 图标缓存）
     */
    addMarkersBatch(points) {
      const batchSize = 30 // 每批处理30个点位
      let index = 0
      const iconCache = {} // 图标缓存，避免重复创建
      
      const addBatch = () => {
        const end = Math.min(index + batchSize, points.length)
        
        for (let i = index; i < end; i++) {
          const ele = points[i]
          try {
            const point = JSON.parse(ele.coordinate)
            if (!point || !point[0]) continue
            
            // 优化：图标复用
            if (!iconCache[ele.type]) {
              iconCache[ele.type] = new T.Icon({
                iconUrl: `https://bbgy.cpzsyun.com:82/icon/${ele.type}.png`,
                iconSize: new T.Point(25, 45),
                iconAnchor: new T.Point(10, 25)
              })
            }
            
            const marker = new T.Marker(
              new T.LngLat(point[0].lng, point[0].lat),
              { icon: iconCache[ele.type] }
            )
            
            this.map.addOverLay(marker)
            this.overlays.push(marker)
            
            // 设备点击事件
            marker.addEventListener('click', () => {
              this.$emit('equipmentClick', ele)
            })
          } catch (error) {
            console.error(`添加点位 ${i} 失败:`, error)
          }
        }
        
        index = end
        
        // 如果还有剩余，继续下一批
        if (index < points.length) {
          requestAnimationFrame(addBatch)
        }
      }
      
      if (points.length > 0) {
        requestAnimationFrame(addBatch)
      }
    },
    
    /**
     * 清除所有覆盖物
     */
    clearAllOverlays() {
      if (this.overlays.length > 0) {
        this.overlays.forEach(overlay => {
          try {
            this.map.removeOverLay(overlay)
          } catch (error) {
            console.error('移除覆盖物失败:', error)
          }
        })
        this.overlays = []
      }
    },
    
    /**
     * 处理缩放级别变化（可选：根据缩放级别动态显示/隐藏标记）
     */
    handleZoomChange() {
      // 可以根据缩放级别调整显示策略
      // 例如：缩放级别小于某个值时，隐藏部分标记
      const zoom = this.currentZoom
      
      // 示例：缩放级别小于14时，可以考虑聚合显示
      if (zoom < 14) {
        // 可以实现标记聚合逻辑
        console.log('当前缩放级别较小，建议使用聚合显示')
      }
    },
  }
}
</script>
<style lang="less" scoped>
#mapDiv {
  width: 100%;
  height: 100%;
  position: relative;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  
  // 加载提示样式
  .map-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: rgba(255, 255, 255, 0.95);
    padding: 20px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    color: #409EFF;
    
    i {
      font-size: 24px;
    }
  }
  
  .slot {
    width: 100%;
    z-index: 9999;
    position: absolute;
    top: 0;
    left: 0;

    .backs {
      width: 100%;
      display: flex;
      padding-top: 20px;

      .back-items {
        background-color: #ffffff;
        padding: 10px 40px;
        cursor: pointer;
        margin: 0 20px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 18px;
        transition: all 0.3s;
        
        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          transform: translateY(-2px);
        }
      }
    }
  }
}
</style>
  